<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <!-- 卡片组件 -->
      <el-card class="tree-card">
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- 放置树形组件 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all @delDepts="getDepartments">
          <!-- 这里还要写作用域插槽来获取数据 传入组件  基础使用在 一些小问题---0el-tree的基础使用.md文件中 -->
          <!-- <tree-tools slot-scope="{data}" :tree-node="data" /> -->
          <!-- 也可以使用 -->
          <template v-slot="{data}">
            <tree-tools :tree-node="data" @addDepts="addDepts" @delDepts="getDepartments()" @editDepts="editDepts" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
  </div>
</template>

<script>
import addDept from './components/add-dept.vue'
import treeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import { transListTreeData } from '@/utils/index.js'
export default {
  components: {
    treeTools,
    addDept
  },
  data() {
    return {
      // 组织架构数据
      departs: [],
      defaultProps: {
        // 默认情况下是 children: 'children'   label: 'name'
        children: 'children', // 从prop中读取children的值 显示为子节点
        label: 'name' // 从prop中读取那么name的值 显示
      },
      // 上面的tree-tools组件的数据
      company: {},
      // 控制弹层显示隐藏
      showDialog: false,
      node: null, // 用来记录当前要添加子部门的部门数据(父级数据)
      loading: false // 进度条变量
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      this.loading = true // 打开loading进度条遮罩层
      const ret = await getDepartments()
      // console.log(ret)
      // this.departs = ret.depts // 这样的结果不是树形的
      this.departs = transListTreeData(ret.depts, '') // 传入list  和  先传入根节点pid ''
      this.company = {
        name: ret.companyName,
        manager: '负责人',
        id: '' // 添加一个id 因为要根据这个id找是否有与他id一样的 不写就是undefined undefined与'' 空字符串 不相等
      }
      // await 总是会等到promise进行resolve
      // await new Promise(resolve => setTimeout(() => resolve(), 1000))
      // this.loading = false
      setTimeout(() => { this.loading = false }, 200)
    },
    // 新增弹层打开 并且记录当前节点
    addDepts(node) {
      this.showDialog = true
      this.node = node // 记录数据
    },
    // 弹层打开 并且记录当前编辑的节点
    editDepts(node) {
      this.showDialog = true
      this.node = node // 记录数据  也用this.node就可以   因为props传递是异步渲染的 所以传递给子组件的时候 下面的方法已经调用了  就搜索不到id 会报错  所以下面方法需要id 就要先传递id
      // 此时就可以调用子组件的方法
      // 1, 使用ref 获取到组件的实例
      this.$refs.addDept.getDepartmentsDetail(node.id) // 调用子组件的方法
    }
  }

}
</script>

<style scoped>
.tree-card{
  padding: 30px  140px;
  font-size:14px;
}
</style>
